<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <link type="text/css" rel="stylesheet" href="css/myCart.css">
    <script type="text/javascript" src="scripts/function.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/myCart.js"></script>
  </head>
  <body>
    <div id="header" class="wrap">
      <div id="logo"><img src="images/logo.gif"/></div>
      <div class="help"><a href="#" class="shopping">购物车</a><a href="login.html">登录</a><a
          href="register.html">注册</a><a href="guestbook.html">留言</a></div>
      <div class="navbar">
        <ul class="clearfix">
          <li class="current"><a href="#">首页</a></li>
          <li><a href="#">图书</a></li>
          <li><a href="#">百货</a></li>
          <li><a href="#">品牌</a></li>
          <li><a href="#">促销</a></li>
        </ul>
      </div>
    </div>
    <div id="childNav">
      <div class="wrap">
        <ul class="clearfix">
          <li class="first"><a href="#">音乐</a></li>
          <li><a href="#">影视</a></li>
          <li><a href="#">少儿</a></li>
          <li><a href="#">动漫</a></li>
          <li><a href="#">小说</a></li>
          <li><a href="#">外语</a></li>
          <li><a href="#">数码相机</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">羽绒服</a></li>
          <li><a href="#">秋冬靴</a></li>
          <li><a href="#">运动鞋</a></li>
          <li><a href="#">美容护肤</a></li>
          <li><a href="#">家纺用品</a></li>
          <li><a href="#">婴幼奶粉</a></li>
          <li><a href="#">饰品</a></li>
          <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
      </div>
    </div>
    <div id="position" class="wrap">
      您现在的位置：<a href="index.html">易买网</a> &gt; 购物车
    </div>
    <div class="wrap">
      <div id="shopping">
        <form action="cartBuyServlet" method="post" name="myform">
          <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
            <thead>
              <tr>
                <td class="title_1"><input id="allCheckBox" type="checkbox" value=""/>全选</td>
                <td class="title_2" colspan="2">店铺宝贝</td>
                <td class="title_4">单价（元）</td>
                <td class="title_5">数量</td>
                <td class="title_6">小计（元）</td>
                <td class="title_7">操作</td>
              </tr>
            </thead>

            <tbody id="products">

            </tbody>

            <tfoot>
              <tr>
                <td colspan="3">
                  <a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg"
                                                                    alt="delete"/></a>
                </td>
                <td colspan="5" class="shopend">商品总价（不含运费）：
                  <label id="total" class="yellow">
                </label> 元<br/>
                  <input type="hidden" name="eoCost" id="eoCost" value="">
                  <input name=" " type="image" src="images/taobao_subtn.jpg"/></td>
              </tr>
            </tfoot>
          </table>
        </form>
      </div>
    </div>
    <div id="footer">
      Copyright &copy; 2010 All Rights Reserved. 京ICP证1000001号
    </div>

    <script type="text/javascript">
      $(function () {
        showAllCart();
      });

      /** 显示所有购物车中商品信息 */
      function showAllCart() {
        $.ajax({
          url: 'cartShowServlet',
          type: 'post',
          dataType: 'json',
          success: function (data) {
            console.log(data);
            if (data.flag == false) {
              location.href = 'http://localhost:8080/login.html';
            }
            let str = '';
            for (let i = 0; i < data.length; i++) {
              let product = data[i].product;
              str += '<tr>\n'
                  + '              <td colspan="8" class="line"></td>\n'
                  + '            </tr>\n'
                  + '            <tr name="product">\n'
                  + ' <input type="hidden" name="epId" value="' + product.epId + '">'
                  + '              <td class="cart_td_1"><input name="cartCheckBox" type="checkbox"/>\n'
                  + '              </td>\n'
                  + '              <td class="cart_td_2"><img src="' + product.epFileName
                  + '" alt="shopping"/></td>\n'
                  + '              <td class="cart_td_3">\n'
                  + '                <a href="ProductGetServlet?id=' + product.epId + '">'
                  + product.epName + '</a>\n'
                  + '              <td class="cart_td_5">' + product.epPrice + '</td>\n'
                  + '              <td class="cart_td_6">\n'
                  + '                <img src="images/taobao_minus.jpg" alt="minus" class="hand"/>\n'
                  + '                <input id="num_1" type="text" value="' + data[i].productNum
                  + '" class="num_input" readonly="readonly"/>\n'
                  + '                <img src="images/taobao_adding.jpg" alt="add" class="hand"/>\n'
                  + '              </td>\n'
                  + '              <td class="cart_td_7"></td>\n'
                  + '              <td class="cart_td_8">\n'
                  + '                <a href="javascript:void(0);">删除</a>\n'
                  + '              </td>\n'
                  + '            </tr>';
            }
            $('#products').html(str);

            jisuan();

            /**
             * 增加、减少数量、最低为1
             */
            $('.hand').on('click', function () {
              var $imgAlt = $(this).attr('alt');
              var $input = $(this).parent().children('input');
              var num = $input.val();
              if ($imgAlt == 'minus') {
                if (num > 1) {
                  $input.val(--num);
                }
              } else if ($imgAlt == 'add') {
                $input.val(++num);
              }
              let epId = $(this).parent().parent().children('input:hidden').val();
              $.ajax({
                url: 'cartChangeNumServlet',
                dataType: 'json',
                data: {newNum: num, epId: epId},
                type: 'post',
                success: function (data) {
                  console.log(data);
                  if (data.flag) {
                  } else {
                    alert(data.message);
                  }
                }
              });
              jisuan();
            });

            //页面加载完毕后判断是否全选
            isAllChecked();
            /**
             * 所有复选框选中，全选被选中
             */
            $('.cart_td_1').off('click').on('click', 'input[type="checkbox"]', function () {
              isAllChecked();
            });

            /**
             * 全选全不选
             */
            $('#allCheckBox').off('click').on('click', function () {
              var allCheck = $(this).prop('checked');
              $('input:checkbox[name="cartCheckBox"]').each(function (index, dom) {
                if (allCheck) {
                  $(dom).prop('checked', true);
                } else {
                  $(dom).prop('checked', false);
                }
              });
            });

            /**
             * 删除这一行
             */
            $('.cart_td_8').off('click').on('click', 'a', function () {
              if (confirm("确定删除")) {
                let eodId = $(this).parent().parent().children('input[name="epId"]').val();
                $.ajax({
                  url: 'cartDeleteServlet',
                  data: {eodId: eodId},
                  type: 'post',
                  dataType: 'json',
                  success: function () {
                    showAllCart();
                    jisuan();
                  }
                });
              }
            });

            /**
             * 删除所选
             */
            $('#deleteAll').off('click').on('click', function () {
              if (confirm('确定删除吗')) {
                let arr = '';
                $('input[type=checkbox][name=cartCheckBox]:checked').each(function () {
                  arr += $(this).parent().parent().children('input[name="epId"]').val() + ',';
                });
                $.ajax({
                  url: 'cartDeleteServlet',
                  data: {eodId: arr},
                  type: 'post',
                  dataType: 'json',
                  success: function () {
                    showAllCart();
                    jisuan();
                  }
                });
              }
            });
          }
        });
      }

      /**
       * 计算商品总价和总积分
       */
      var jisuan = function () {
        var $tr = $('#shopping tr[name="product"]');
        var xiaoji = 0;
        var sumPrice = 0;
        $tr.each(function () {
          //数量
          var num = $(this).children('.cart_td_6').children('input').val();
          //单价
          var price = $(this).children('.cart_td_5').text();
          //单个商品总价
          xiaoji = price * num;
          //设置单个商品总价
          $(this).children('.cart_td_7').text(xiaoji);
          //总价
          sumPrice += xiaoji;
        });
        $('#total').text(sumPrice);
        $('#eoCost').val(sumPrice);
        console.log($('#eoCost').val());
      };
      /**
       * 判断是否全选
       */
      var isAllChecked = function () {
        var checkBox_len = $(
            'input[type="checkbox"][name="cartCheckBox"]:checked').length;
        var sumCheckBox_len = $('.cart_td_1').length;
        if (checkBox_len === sumCheckBox_len) {

          $('#allCheckBox').prop('checked', true);
        } else {
          $('#allCheckBox').prop('checked', false);
        }
      };
    </script>
  </body>
</html>
